<template>
    <div>
        <nav class="nav has-shadow app-navbar">
            <span class="nav-toggle" v-bind:class="{'is-active':menuActive}" @click="menuTarget">
            <span></span><span></span><span></span></span>

            <div class="nav-left">
                <a class="nav-item">
                    <b class="text-logo">ALOPEX · CMDB</b>
                </a>
            </div>
            <div class="nav-right nav-menu">
                <a class="nav-item is-tab is-hidden-mobile">Log out</a>
            </div>

        </nav>
        <aside class="menu app-sidebar" v-show="menuActive||!isMobile">
            <div class="menu">
                <menus label="内容管理">
                    <menu-item icon="image">
                        <span>图片</span>
                        <menus slot="sub">
                            <menu-item :to="{ path: '/components/menu/submenu1', query: { userId: 321 }}" icon="car" :is-active="true">汽车</menu-item>
                            <menu-item icon="slack">
                                <span>风景</span>
                                <menus slot="sub">
                                    <menu-item icon="home">Picture</menu-item>
                                    <menu-item icon="home">Content</menu-item>
                                    <menu-item icon="home">Content</menu-item>
                                    <menu-item icon="home">Content</menu-item>
                                    <menu-item icon="home">Content</menu-item>
                                    <menu-item icon="home">Content</menu-item>
                                    <menu-item icon="home">Content</menu-item>
                                    <menu-item icon="home">Content</menu-item>
                                    <menu-item icon="home">Content</menu-item>
                                    <menu-item icon="home">Content</menu-item>
                                    <menu-item icon="home">Content</menu-item>
                                    <menu-item icon="home">Content</menu-item>
                                    <menu-item icon="home">Content</menu-item>
                                    <menu-item icon="home">Content</menu-item>
                                    <menu-item icon="home">Content</menu-item>
                                    <menu-item icon="home">Content</menu-item>
                                    <menu-item icon="home">Content</menu-item>
                                    <menu-item icon="home">Content</menu-item>
                                    <menu-item icon="home">Content</menu-item>
                                    <menu-item icon="home">Content</menu-item>
                                    <menu-item icon="home">Content</menu-item>
                                    <menu-item icon="home">Content</menu-item>
                                </menus>
                            </menu-item>
                        </menus>
                    </menu-item>
                    <menu-item icon="music" to="/components/menu/submenu2">音乐</menu-item>
                    <menu-item icon="file-text-o" to="/components/menu/submenu4"><span>文章</span></menu-item>
                    <menu-item icon="film" to="/components/menu/submenu3"><span>视频</span></menu-item>
                </menus>
                <menus label="系统设置">
                    <menu-item icon="users">会员管理</menu-item>
                    <menu-item icon="ticket">工单管理</menu-item>
                    <menu-item icon="lock">修改密码</menu-item>
                    <div class="divider"></div>
                    <menu-item icon="sign-out" class="is-hidden-tablet">退出登录</menu-item>
                </menus>
            </div>
        </aside>
        <section class="app-main">
            <button class="button" @click="primaryNotify">消息</button>
        </section>
    </div>
</template>

<script>
    export default {
        data: function () {
            return {
                menuActive: false,
                isMobile:false
            }
        },
        methods: {
            menuTarget: function () {
                this.menuActive = !this.menuActive
            },
            primaryNotify:function() {
                this.$notify.open({content: '您点击了我！', type: 'primary'});
            }
        },
        beforeMount () {
            const { body } = document
            const WIDTH = 768
            const RATIO = 3
            let vm = this
            const handler = () => {
                if (!document.hidden) {
                    let rect = body.getBoundingClientRect()
                    vm.isMobile = rect.width - RATIO < WIDTH
                }
            }

            document.addEventListener('visibilitychange', handler)
            window.addEventListener('DOMContentLoaded', handler)
            window.addEventListener('resize', handler)
        }
    }
</script>
<style>
    .app-sidebar {
        position: fixed;
        top: 50px;
        left: 0;
        bottom: 0;
        padding: 0;
        width: 250px;
        min-width: 45px;
        max-height: 100vh;
        height: calc(100% - 50px);
        z-index: 1023;
        background: #fff;
        box-shadow: 0 2px 3px hsla(0,0%,7%,.1),0 0 0 1px hsla(0,0%,7%,.1);
        overflow-y: auto;
        overflow-x: hidden;
    }
    .menu-list li ul {
        border-left: 0px solid #dbdbdb !important;
        padding-left: 0 !important;
    }
    .app-main {
        padding-top: 50px;
        margin-left: 250px;
        transform: translateZ(0);
    }
    .app-navbar {
    position: fixed !important;
    min-width: 100%;
    z-index: 1024;
    }

    @media screen and (max-width: 765px) {
        .app-main {
            margin-left: 0px;
        }
    }

    .text-logo{
        font-size: 20px;
    }
</style>